import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NzMessageService, NzModalRef } from 'ng-zorro-antd';
import { FetchService } from '../../../../core/net/fetch.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import * as _ from 'lodash';
import { HttpClient } from '@angular/common/http';
import 'echarts-liquidfill';
import * as echarts from 'echarts';
import { JzGateConfig } from './jiezhi_config';

@Component({
    selector: 'app-gate-jiezhi-detail',
    templateUrl: './gate-jiezhi-detail.component.html',
    styleUrls: ['./gate-jiezhi-detail.component.scss']
})
export class GateJiezhiDetailComponent implements OnInit {
    @Input() jzData: any;
    @Input() dianbiaoData: any;
    @Input() dianbiaoData2: any;
    @Input() groupIndex: any;
    videoIdList;
    videoArr = [];

    // 水位chart
    liquidChartOption = {
        series: [
            {
                name: '闸前水位',
                type: 'liquidFill',
                data: [],
                radius: '80%',
                outline: {
                    show: true,
                    borderDistance: 0,
                    itemStyle: {
                        borderColor: '#edf2f6',
                        borderWidth: 1
                        // opacity: 0.1
                    }
                },
                backgroundStyle: {
                    color: '#E3F7FF'
                },
                itemStyle: {
                    // opacity: 0.95,
                    // shadowBlur: 50,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                },
                label: {
                    normal: {
                        textStyle: {
                            color: '#42BC9F',  // 默认背景下的文字颜色
                            insideColor: 'white', // 水波背景下的文字颜色
                            fontWeight: 'normal',
                            fontSize: 16   // 字体大小
                        },
                        rich: {
                            label: {
                                fontSize: 12,
                                lineHeight: 16,
                                // fontWeight: "bold"
                                align: 'left'
                            },
                            value: {
                                fontSize: 18,
                                lineHeight: 18,
                                fontWeight: 'bold',
                                align: 'left'
                            },
                            unit: {
                                fontSize: 14,
                                lineHeight: 18,
                                fontWeight: 'bold'
                            }
                        }
                    }
                }
            }
        ]
    };
    greenLiquidOption = {};

    basicOpts = {
        grid: {
            top: 20,
            bottom: 0
        },
        xAxis: {
            type: 'category',
            show: false,
            data: ['开度']
        },
        yAxis: {
            type: 'value',
            show: false,
            max: 1
        },
        series: [{
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: '#D6E1EB'
            },
            barWidth: 30,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ]
                )
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ]
                    )
                }
            }
        }]
    };
    chartData = [];
    customOpts = [];
    chartData2 = [];
    customOpts2 = [];
    gateConfig = JzGateConfig;
    gateWrapList = [
        {
            title: '1号闸口'
        },
        {
            title: '2号闸口'
        },
        {
            title: '3号闸口'
        }
    ];
    gateWrapList2 = [
        {
            title: '4号闸口'
        },
        {
            title: '5号闸口'
        },
        {
            title: '6号闸口'
        }
    ];

    hidePwd = true;
    isVisible = false;
    isOkLoading = false;
    passwordForm: FormGroup;
    passwordModalStyle = {
        top: '45%'
    };
    rtuUrl = (window as any).environment.rtuUrl;
    gateData;
    yuding2 = false;
    col;
    val;

    constructor(private modal: NzModalRef,
                private fb: FormBuilder,
                private http: HttpClient,
                private message: NzMessageService,
                private fetchService: FetchService) {
    }

    ngOnInit(): void {
        console.log(this.jzData);
        this.passwordForm = this.fb.group({
            password: ['yjq@0106']
        });
        this.videoIdList = this.jzData['videoList'];
        this.videoArr = this.jzData['videoList'].split(',');

        const warningLevel = this.jzData['jingjieshuiwei'] || 2.5; //  警戒水位
        const percentage = (this.dianbiaoData.A7 || 0) / warningLevel;

        this.greenLiquidOption = {
            series: [
                {
                    data: [
                        percentage,
                        percentage
                    ],
                    label: {
                        normal: {
                            formatter: '\n' + '{label|' +
                                '当前水位:' +
                                '}' +
                                '\n' +
                                '{value|' + this.dianbiaoData.A7 + '}' +
                                '{unit|' + 'm' +
                                '}'
                        }
                    },
                    color: ['#42BC9F', '#6DBC9D']
                }
            ]
        };
        this.jzData.openInfo.forEach(info => {
            this.chartData.push(info.val);
            this.customOpts.push({
                series: [
                    {
                        data: [info.val / 1.5]
                    }
                ]
            });
        });
    }

    setControl(col, val, item, yuding2?): void {
        this.isVisible = true;
        this.col = col;
        this.val = val;
        this.gateData = item;
        this.yuding2 = yuding2;
    }

    handleOk(): void {
        this.isOkLoading = true;
        const groupIndexArr = this.groupIndex.split(',');
        // tslint:disable-next-line:prefer-const one-variable-per-declaration
        let groupIndex, dianbiaoData;
        const openCol = this.gateConfig[this.gateData.title].opening;
        if (groupIndexArr.length < 2) {
            groupIndex = this.groupIndex;
            dianbiaoData = this.dianbiaoData;
        } else {
            groupIndex = this.yuding2 ? groupIndexArr[1] : groupIndexArr[0];
            dianbiaoData = this.yuding2 ? this.dianbiaoData2 : this.dianbiaoData;
        }
        this.http.get(`${ this.rtuUrl }data/newEdit`, {
                params: {
                    opPassword: this.passwordForm.get('password').value,
                    serverIndex: '0',
                    groupIndex: groupIndex,
                    val: dianbiaoData[openCol],
                    col: openCol
                }
            }
        ).subscribe(res => {
            if (res['error']) {
                this.message.create('error', res['error'].msg);
            } else {
                this.http.get(`${ this.rtuUrl }data/newEdit`, {
                        params: {
                            opPassword: this.passwordForm.get('password').value,
                            serverIndex: '0',
                            groupIndex: groupIndex,
                            val: this.val,
                            col: this.col
                        }
                    }
                ).subscribe(resp => {
                    if (resp['error']) {
                        this.message.create('error', resp['error'].msg);
                    }
                    this.isVisible = false;
                    this.isOkLoading = false;
                    // this.getData();
                });
            }
            this.isVisible = false;
            this.isOkLoading = false;
            // this.getData();
        });
    }

    handleCancel(): void {
        this.isVisible = false;
    }
}
